<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">

    <component :is="currentCom"></component>
</div>
<template id="mytem">
    <div>
        <input v-model="content" type="text">
        <input type="button" value="添加" @click="addArry()">
        <ul>
            <li v-for="(item,index) in arr1">{{item}}<input type="button" value="删除" @click="delArry(index)"></li>
        </ul>
    </div>
</template>
<script>
    new Vue({
        el: '#app',
        data: {
            currentCom: 'mycom'
        },
        components: {
            mycom: {
                template: '#mytem',
                data () {
                    return {
                        arr1: [],
                        content: ''
                    }
                },
                methods: {
                    addArry () {
                        this.arr1.push(this.content)
                    },
                    delArry (index) {
                        this.arr1.splice(index,1)
                    }
                }
            }
        }
    })
</script>
</body>
</html>
